<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>酒店系统ER图</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }
        .container {
            width: 1200px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
        }
        .entity {
            border: 1px solid #000;
            width: 280px;
            margin: 10px;
            background-color: #fff;
            display: inline-block;
            vertical-align: top;
            position: relative;
            z-index: 2;
        }
        .entity-header {
            background-color: #f0f0f0;
            padding: 8px;
            text-align: center;
            font-weight: bold;
            border-bottom: 1px solid #000;
        }
        .entity-content {
            padding: 0;
        }
        .attribute {
            padding: 5px 10px;
            border-bottom: 1px solid #ddd;
        }
        .pk {
            font-weight: bold;
        }
        .fk {
            font-style: italic;
        }
        
        /* 新增关系线样式 */
        .relationship-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }
        .relationship-line {
            position: absolute;
            background-color: #000;
            height: 2px;
            transform-origin: 0 0;
            z-index: 1;
        }
        .relationship-label {
            position: absolute;
            background-color: white;
            padding: 0 5px;
            border: 1px solid #ddd;
            font-size: 12px;
            z-index: 2;
        }
        .relationship-end {
            position: absolute;
            font-size: 16px;
            z-index: 2;
        }
        
        /* 实体布局 */
        .row {
            display: flex;
            justify-content: space-around;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 实体布局调整为行结构 -->
        <div class="row">
            <!-- 用户实体 -->
            <div class="entity" id="users">
                <div class="entity-header">用户</div>
                <div class="entity-content">
                    <div class="attribute pk">*用户ID : bigint «PK»</div>
                    <div class="attribute">用户名 : varchar</div>
                    <div class="attribute">密码 : varchar</div>
                    <div class="attribute">邮箱 : varchar</div>
                    <div class="attribute">电话 : varchar</div>
                    <div class="attribute">角色 : enum</div>
                    <div class="attribute">创建时间 : datetime</div>
                    <div class="attribute">头像 : varchar</div>
                    <div class="attribute">身份证 : varchar</div>
                </div>
            </div>

            <!-- 酒店实体 -->
            <div class="entity" id="hotels">
                <div class="entity-header">酒店</div>
                <div class="entity-content">
                    <div class="attribute pk">*酒店ID : bigint «PK»</div>
                    <div class="attribute">名称 : varchar</div>
                    <div class="attribute">地址 : varchar</div>
                    <div class="attribute">城市 : varchar</div>
                    <div class="attribute">描述 : varchar</div>
                    <div class="attribute">评分 : double</div>
                    <div class="attribute">电话 : varchar</div>
                    <div class="attribute">创建时间 : datetime</div>
                    <div class="attribute">头像 : varchar</div>
                    <div class="attribute">照片集 : text</div>
                    <div class="attribute fk">管理员ID : bigint «FK»</div>
                </div>
            </div>

            <!-- 房间实体 -->
            <div class="entity" id="rooms">
                <div class="entity-header">房间</div>
                <div class="entity-content">
                    <div class="attribute pk">*房间ID : bigint «PK»</div>
                    <div class="attribute">名称 : varchar</div>
                    <div class="attribute">房间号 : varchar</div>
                    <div class="attribute">类型 : varchar</div>
                    <div class="attribute">价格 : decimal</div>
                    <div class="attribute">数量 : int</div>
                    <div class="attribute">容纳人数 : int</div>
                    <div class="attribute">面积 : int</div>
                    <div class="attribute">床型 : varchar</div>
                    <div class="attribute">标签 : json</div>
                    <div class="attribute">设施 : json</div>
                    <div class="attribute">房间号列表 : json</div>
                    <div class="attribute">图片URL : varchar</div>
                    <div class="attribute">状态 : int</div>
                    <div class="attribute fk">酒店ID : bigint «FK»</div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 预订实体 -->
            <div class="entity" id="booking">
                <div class="entity-header">预订</div>
                <div class="entity-content">
                    <div class="attribute pk">*预订ID : bigint «PK»</div>
                    <div class="attribute fk">用户ID : bigint «FK»</div>
                    <div class="attribute fk">酒店ID : bigint «FK»</div>
                    <div class="attribute fk">房间ID : bigint «FK»</div>
                    <div class="attribute">入住时间 : datetime</div>
                    <div class="attribute">退房时间 : datetime</div>
                    <div class="attribute">入住人数 : int</div>
                    <div class="attribute">预订房间数 : int</div>
                    <div class="attribute">总价 : decimal</div>
                    <div class="attribute">状态 : varchar</div>
                    <div class="attribute">备注 : varchar</div>
                    <div class="attribute">创建时间 : datetime</div>
                    <div class="attribute">订单编号 : varchar</div>
                    <div class="attribute">支付状态 : int</div>
                </div>
            </div>

            <!-- 旅客实体 -->
            <div class="entity" id="traveler">
                <div class="entity-header">旅客</div>
                <div class="entity-content">
                    <div class="attribute pk">*旅客ID : bigint «PK»</div>
                    <div class="attribute fk">用户ID : bigint «FK»</div>
                    <div class="attribute">身份证 : varchar</div>
                    <div class="attribute">姓名 : varchar</div>
                    <div class="attribute">电话 : varchar</div>
                </div>
            </div>

            <!-- 预订旅客关联实体 -->
            <div class="entity" id="booking_traveler">
                <div class="entity-header">预订旅客关联</div>
                <div class="entity-content">
                    <div class="attribute pk">*关联ID : int «PK»</div>
                    <div class="attribute fk">预订ID : int «FK»</div>
                    <div class="attribute fk">身份证号 : varchar «FK»</div>
                    <div class="attribute">电话 : varchar</div>
                    <div class="attribute">姓名 : varchar</div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 评论实体 -->
            <div class="entity" id="reviews">
                <div class="entity-header">评论</div>
                <div class="entity-content">
                    <div class="attribute pk">*评论ID : bigint «PK»</div>
                    <div class="attribute">评论标识 : bigint</div>
                    <div class="attribute fk">预订ID : bigint «FK»</div>
                    <div class="attribute fk">酒店ID : bigint «FK»</div>
                    <div class="attribute fk">用户ID : bigint «FK»</div>
                    <div class="attribute">用户名称 : varchar</div>
                    <div class="attribute">评分 : int</div>
                    <div class="attribute">内容 : text</div>
                    <div class="attribute">照片 : text</div>
                    <div class="attribute">标签 : text</div>
                    <div class="attribute">回复 : text</div>
                    <div class="attribute">回复时间 : datetime</div>
                    <div class="attribute">创建时间 : datetime</div>
                    <div class="attribute">状态 : int</div>
                </div>
            </div>

            <!-- 消息实体 -->
            <div class="entity" id="message">
                <div class="entity-header">消息</div>
                <div class="entity-content">
                    <div class="attribute pk">*消息ID : int «PK»</div>
                    <div class="attribute fk">用户ID : varchar «FK»</div>
                    <div class="attribute">标题 : varchar</div>
                    <div class="attribute">内容 : text</div>
                    <div class="attribute">是否已读 : tinyint</div>
                    <div class="attribute">创建时间 : datetime</div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 酒店设施实体 -->
            <div class="entity" id="hotel_amenities">
                <div class="entity-header">酒店设施</div>
                <div class="entity-content">
                    <div class="attribute pk">*设施ID : varchar «PK»</div>
                    <div class="attribute fk">酒店ID : varchar «FK»</div>
                    <div class="attribute">设施分类 : json</div>
                </div>
            </div>

            <!-- 酒店位置实体 -->
            <div class="entity" id="hotel_location">
                <div class="entity-header">酒店位置</div>
                <div class="entity-content">
                    <div class="attribute pk">*位置ID : varchar «PK»</div>
                    <div class="attribute fk">酒店ID : varchar «FK»</div>
                    <div class="attribute">地址 : varchar</div>
                    <div class="attribute">城市 : varchar</div>
                    <div class="attribute">省份 : varchar</div>
                    <div class="attribute">邮编 : varchar</div>
                    <div class="attribute">国家 : varchar</div>
                    <div class="attribute">经度 : decimal</div>
                    <div class="attribute">纬度 : decimal</div>
                    <div class="attribute">交通 : json</div>
                    <div class="attribute">景点 : json</div>
                </div>
            </div>

            <!-- 酒店政策实体 -->
            <div class="entity" id="hotel_policy">
                <div class="entity-header">酒店政策</div>
                <div class="entity-content">
                    <div class="attribute pk">*政策ID : varchar «PK»</div>
                    <div class="attribute fk">酒店ID : varchar «FK»</div>
                    <div class="attribute">入住时间 : varchar</div>
                    <div class="attribute">退房时间 : varchar</div>
                    <div class="attribute">最早预订时间 : int</div>
                    <div class="attribute">最晚预订时间 : int</div>
                    <div class="attribute">免费取消时间 : int</div>
                    <div class="attribute">取消费用百分比 : int</div>
                    <div class="attribute">支付方式 : json</div>
                    <div class="attribute">是否需要预付款 : tinyint</div>
                    <div class="attribute">预付比例 : int</div>
                    <div class="attribute">是否允许宠物 : tinyint</div>
                    <div class="attribute">宠物费用 : decimal</div>
                </div>
            </div>
        </div>

        <!-- 关系线容器 -->
        <div class="relationship-container" id="relationships"></div>

        <!-- 关系说明 -->
        <div style="margin-top: 30px; border: 1px solid #000; padding: 10px; background-color: #fff;">
            <h3>实体关系说明：</h3>
            <ul>
                <li>用户 —— 预订：一对多，用户可以有多个预订</li>
                <li>用户 —— 旅客：一对多，用户可以关联多个旅客信息</li>
                <li>用户 —— 消息：一对多，用户可以接收多条消息</li>
                <li>用户 —— 评论：一对多，用户可以发表多条评论</li>
                <li>酒店 —— 房间：一对多，酒店有多个房间</li>
                <li>酒店 —— 预订：一对多，酒店可以接收多个预订</li>
                <li>酒店 —— 评论：一对多，酒店可以接收多条评论</li>
                <li>酒店 —— 酒店设施：一对一，每个酒店有一套设施信息</li>
                <li>酒店 —— 酒店位置：一对一，每个酒店有一个位置信息</li>
                <li>酒店 —— 酒店政策：一对一，每个酒店有一套政策信息</li>
                <li>房间 —— 预订：一对多，一种房间类型可以有多个预订</li>
                <li>预订 —— 预订旅客关联：一对多，一个预订可以包含多个旅客</li>
                <li>预订 —— 评论：一对多，一个预订可以产生多条评论</li>
                <li>旅客 —— 预订旅客关联：一对多，一个旅客可以包含在多个预订中</li>
            </ul>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 定义关系
            const relationships = [
                // 用户关系
                { from: 'users', to: 'booking', label: '1:n', fromSymbol: '1', toSymbol: 'n' },
                { from: 'users', to: 'traveler', label: '1:n', fromSymbol: '1', toSymbol: 'n' },
                { from: 'users', to: 'message', label: '1:n', fromSymbol: '1', toSymbol: 'n' },
                { from: 'users', to: 'reviews', label: '1:n', fromSymbol: '1', toSymbol: 'n' },
                
                // 酒店关系
                { from: 'hotels', to: 'rooms', label: '1:n', fromSymbol: '1', toSymbol: 'n' },
                { from: 'hotels', to: 'booking', label: '1:n', fromSymbol: '1', toSymbol: 'n' },
                { from: 'hotels', to: 'reviews', label: '1:n', fromSymbol: '1', toSymbol: 'n' },
                { from: 'hotels', to: 'hotel_amenities', label: '1:1', fromSymbol: '1', toSymbol: '1' },
                { from: 'hotels', to: 'hotel_location', label: '1:1', fromSymbol: '1', toSymbol: '1' },
                { from: 'hotels', to: 'hotel_policy', label: '1:1', fromSymbol: '1', toSymbol: '1' },
                
                // 预订关系
                { from: 'rooms', to: 'booking', label: '1:n', fromSymbol: '1', toSymbol: 'n' },
                { from: 'booking', to: 'booking_traveler', label: '1:n', fromSymbol: '1', toSymbol: 'n' },
                { from: 'booking', to: 'reviews', label: '1:n', fromSymbol: '1', toSymbol: 'n' },
                
                // 旅客关系
                { from: 'traveler', to: 'booking_traveler', label: '1:n', fromSymbol: '1', toSymbol: 'n' }
            ];
            
            // 绘制关系线
            drawRelationships(relationships);
            
            // 窗口大小改变时重新绘制
            window.addEventListener('resize', function() {
                const container = document.getElementById('relationships');
                container.innerHTML = '';
                drawRelationships(relationships);
            });
        });
        
        // 绘制关系线函数
        function drawRelationships(relationships) {
            const container = document.getElementById('relationships');
            
            relationships.forEach(rel => {
                const fromEl = document.getElementById(rel.from);
                const toEl = document.getElementById(rel.to);
                
                if (!fromEl || !toEl) return;
                
                // 获取元素位置
                const fromRect = fromEl.getBoundingClientRect();
                const toRect = toEl.getBoundingClientRect();
                
                // 计算容器位置的偏移
                const containerRect = container.parentElement.getBoundingClientRect();
                
                // 计算连线起点和终点
                const fromX = fromRect.left + fromRect.width / 2 - containerRect.left;
                const fromY = fromRect.top + fromRect.height / 2 - containerRect.top;
                const toX = toRect.left + toRect.width / 2 - containerRect.left;
                const toY = toRect.top + toRect.height / 2 - containerRect.top;
                
                // 计算线条长度和角度
                const length = Math.sqrt(Math.pow(toX - fromX, 2) + Math.pow(toY - fromY, 2));
                const angle = Math.atan2(toY - fromY, toX - fromX) * 180 / Math.PI;
                
                // 创建线条
                const line = document.createElement('div');
                line.className = 'relationship-line';
                line.style.width = `${length}px`;
                line.style.left = `${fromX}px`;
                line.style.top = `${fromY}px`;
                line.style.transform = `rotate(${angle}deg)`;
                container.appendChild(line);
                
                // 创建关系标签
                const label = document.createElement('div');
                label.className = 'relationship-label';
                label.textContent = rel.label;
                label.style.left = `${fromX + (toX - fromX) / 2 - 15}px`;
                label.style.top = `${fromY + (toY - fromY) / 2 - 10}px`;
                container.appendChild(label);
                
                // 创建起点符号
                const fromEnd = document.createElement('div');
                fromEnd.className = 'relationship-end';
                fromEnd.textContent = rel.fromSymbol;
                fromEnd.style.left = `${fromX}px`;
                fromEnd.style.top = `${fromY - 15}px`;
                container.appendChild(fromEnd);
                
                // 创建终点符号
                const toEnd = document.createElement('div');
                toEnd.className = 'relationship-end';
                toEnd.textContent = rel.toSymbol;
                toEnd.style.left = `${toX - 10}px`;
                toEnd.style.top = `${toY - 15}px`;
                container.appendChild(toEnd);
            });
        }
    </script>
</body>
</html>